<template lang="pug">
    .header
      .version
        router-link(to="/index")
          img(src="../assets/img/version.png")
        span V1.0
      .logo
        router-link(to="/index")
          img(src="../assets/img/logo.svg")
      .head-body
        .login-div
          span 欢迎您！ {{userName}}
          span(class="logout" @click="logout") 退出
</template>

<script lang='ts'>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import storage from 'assets/js/storage/index.js'
@Component({
  name: 'v-header'
})
export default class Header extends Vue {
  userName: string = ''
  mounted() {
    if (!storage.getAccessToken()) {
      this.$router.push('/login')
    } else {
      let userInfo: any = storage.getCurrentUserInfo() && JSON.parse(storage.getCurrentUserInfo())
      this.userName = userInfo.username
    }
  }
  logout() {
    this.$confirm('确认退出?', '提示').then(() => {
      try{
      storage.removeAccessToken()
      storage.removeCurrentUserInfo()
      }catch(e){
        console.log(e)
      }
      this.$router.push('/login')
    }).catch(() => {
      this.$message('已取消');
    });
  }

  beforeRouteEnter(to: any, from: any, next: any) {
    console.log("hhhh")
    var st = setTimeout(() => {
      this.$loading({})
    }, 500)
    // this.loadConfig(()=>{
    // clearTimeout(st)
    // this.$loading({}).close()
    // next()
    // });
  }
}
</script>

<style lang="stylus" scoped>
.header
  height 80px
  background linear-gradient(90deg,#009fd7,#01c8c1)
  .version
    width 240px
    height 100%
    background white
    float left
    img 
      // width 144px
      height 36px
      margin-top 29px
      margin-left 37px
    span 
      color #ff9000
      font-size 14px
      position relative
      top -18px
      left 5px
  .logo
    background transparent
    width 240px
    height 100%
    border-bottom 1px solid #e6e6e6
    img 
      width 132px
      height 48px
      margin-left 54px
      margin-top 16px
  .head-body
    // width calc(100% - 240px)
    height 100%
    float right 
  div
    display inline-block
  .login-div
    float right 
    line-height 80px
    margin-right 100px
    .logout
      cursor pointer
      color blue
      margin-left 20px
      &:hover
        color #333
</style>
